<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import IconSvg from "@/components/IconSvg/index.vue";
import { ITableData, SearchParams, IRefundParams } from "./data";
import { queryList, exportList } from "./service";
import { IResponseData } from "@/@types/utils.request";
import { orderStatus, uniformPageSize } from "@/config/settings";
import { ElLoading } from "element-plus";
import { statusMap } from "@/utils/statusMap";
import searchBox from "./components/searchBox.vue";
import patientBox from "./components/patientBox.vue";
import nutritionBox from "./components/nutritionBox.vue";
import dietician from "./components/dietician.vue";
import physician from "./components/physician.vue";
import refundBox from "./components/refundBox.vue";

// 搜索
const searchData = ref<SearchParams>({
	patientName: "",
	doctorName: "",
	nutritionistName: "",
	orderStatus: "",
	orderAppointmentTime: [],
});

const table = reactive<ITableData>({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
	},
});

// 列表数据
const getList = async (pageNum: number, pageSize?: number): Promise<void> => {
	table.loading = true;
	try {
		const response: IResponseData<any> = await queryList({
			pageSize: pageSize || table.pagination.pageSize,
			pageNum: pageNum,
			...searchData.value,
		});
		const { data } = response;
		table.list = data.records || [];
		table.pagination = {
			...table.pagination,
			total: data.total || 0,
			pageNum,
		};
	} catch (error: any) {
		console.log(error);
	}
	table.loading = false;
};

// 导出数据
const selectionData = ref<any[]>([]);
const handExport = async () => {
	try {
		const loading = ElLoading.service({
			lock: true,
			text: "导出中...",
			background: "rgba(0, 0, 0, 0.7)",
		});
		const response: IResponseData<any> = await exportList({
			pageSize: table.pagination.pageSize,
			pageNum: table.pagination.pageNum,
			orderIds: selectionData.value,
			...searchData.value,
		});
		const { data } = response;
		loading.close();
		window.location.href = data;
	} catch (error: any) {
		console.log(error);
	}
};

const selectionChange = (val: any) => {
	selectionData.value = val.map((item: any) => item.orderNo);
};

// 获取患者信息
const orderNo = ref<string>();
const patientVisible = ref<boolean>(false);
const handPatientChange = (val: { orderNo: string | undefined }) => {
	orderNo.value = val.orderNo;
	patientVisible.value = true;
};

// 医生转单
const physicianVisible = ref<boolean>(false);
const handPhysicianChange = (val: { orderNo: string | undefined }) => {
	orderNo.value = val.orderNo;
	physicianVisible.value = true;
};

// 营养师转单
const dieticianVisible = ref<boolean>(false);
const handDieticianChange = (val: { orderNo: string | undefined }) => {
	orderNo.value = val.orderNo;
	dieticianVisible.value = true;
};

// 获取营养方案
const nutritionVisible = ref<boolean>(false);
const handNutritionChange = (val: { orderNo: string | undefined }) => {
	orderNo.value = val.orderNo;
	nutritionVisible.value = true;
};

// 退款
const refundVisible = ref<boolean>(false);

const refundData = ref<IRefundParams>({
	orderNo: "",
	serviceAmount: "",
});
const handRefundChange = (val: any) => {
	refundVisible.value = true;
	refundData.value = {
		orderNo: val.orderNo,
		serviceAmount: val.orderAmount,
	};
};

// 搜索
const onSearch = (val: any) => {
	searchData.value = val;
	selectionData.value = [];
	getList(1);
};
// 刷新数据
/* const onRefresh = () => {
	handleSizeChange();
}; */

const handleSizeChange = () => {
	getList(table.pagination.pageNum, table.pagination.pageSize);
};
const handleCurrentChange = (val: number) => {
	getList(val);
};
onMounted(() => {
	getList(1);
});

const route = useRoute();
</script>

<template>
	<searchBox v-model="searchData" :order-status="orderStatus" @search="onSearch" />
	<patientBox v-model="patientVisible" :order-no="orderNo" />
	<physician v-model="physicianVisible" :order-no="orderNo" />
	<dietician v-model="dieticianVisible" :order-no="orderNo" />
	<nutritionBox v-model="nutritionVisible" :order-no="orderNo" />
	<refundBox v-model="refundVisible" :refund-data="refundData" />
	<el-card shadow="never">
		<template #header>
			<el-row justify="space-between">
				<el-col :span="8" style="font-size: 18px"> <IconSvg name="modular" />&nbsp;{{ route.meta.title }}</el-col>
				<el-col :span="8" style="text-align: end">
					<el-button type="primary" @click="handExport"
						><template #icon><IconSvg name="sign-out" /></template>导出excel</el-button
					>
				</el-col>
			</el-row>
		</template>
		<div style="width: 99.9%">
			<el-table
				row-key="id"
				:data="table.list"
				v-loading="table.loading"
				stripe
				border
				@selection-change="selectionChange"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column
					type="index"
					label="序号"
					width="70"
					:index="
						(index) => {
							return (table.pagination.pageNum - 1) * table.pagination.pageSize + index + 1;
						}
					"
				>
				</el-table-column>
				<el-table-column label="订单号" prop="orderNo"> </el-table-column>
				<el-table-column label="就诊人" prop="patientName">
					<template #default="{ row }">
						<el-button type="primary" link @click="handPatientChange(row)"
							><template #icon><IconSvg name="menu-detail" /></template>{{ row.patientName }}</el-button
						>
					</template>
				</el-table-column>
				<el-table-column label="手机号" prop="patientPhone"> </el-table-column>
				<el-table-column label="项目名称" prop="projectName"> </el-table-column>
				<el-table-column label="临床医师" prop="doctorName">
					<template #default="{ row }">
						<el-button type="primary" link @click="handPhysicianChange(row)" v-if="row.doctorName"
							><template #icon><IconSvg name="edit" /></template>{{ row.doctorName }}</el-button
						>
					</template></el-table-column
				>
				<el-table-column label="营养师" prop="nutritionistName"
					><template #default="{ row }">
						<el-button type="primary" link @click="handDieticianChange(row)" v-if="row.nutritionistName"
							><template #icon><IconSvg name="edit" /></template>{{ row.nutritionistName }}</el-button
						>
					</template></el-table-column
				>
				<el-table-column label="订单状态" prop="orderStatus">
					<template #default="{ row }">
						<el-tag :type="statusMap(orderStatus, row.orderStatus).type || 'info'">{{
							statusMap(orderStatus, row.orderStatus).value
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="订单费用" prop="orderAmount"> </el-table-column>
				<el-table-column label="预约时间" prop="appointmentTime"> </el-table-column>
				<el-table-column label="结束时间" prop="consultEndTimeStr"> </el-table-column>
				<el-table-column label="操作" prop="action" width="260">
					<template #default="{ row }">
						<el-button type="primary" link @click="handNutritionChange(row)"
							><template #icon><IconSvg name="file" /></template>营养方案</el-button
						>
						<el-button type="danger" link @click="handRefundChange(row)"
							><template #icon><IconSvg name="menu-anomaly" /></template>退款</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="padding-t10 display-flex-end">
			<el-pagination
				background
				layout="total,sizes, prev, pager, next"
				v-model:current-page="table.pagination.pageNum"
				v-model:page-size="table.pagination.pageSize"
				:page-sizes="uniformPageSize"
				:total="table.pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
	</el-card>
</template>
